<template>
  <div>
    <my-map v-bind:mapInfo="mapInfo"
            @onClickNode="onClickNode"
            @postInitMap="postInitMap"
    />
  </div>
</template>

<script>
  import MyMap from '../MyMap'
  import {shpJsonPage13GuanHuiJian_1BaiJianTanGuanHuiJian} from './shpJson'
  import {shpJsonPage13GuanHuiJian_2FaMenShi1} from './shpJson'
  import {shpJsonPage13GuanHuiJian_3FaMenShi2} from './shpJson'
  import {MyMapShpJsonAdapter} from "../MyMapShpJsonAdapter";
  import {stateManager} from "../StateManager";
  import {Const} from "../Const";

  export default {
    name: 'Page13GuanHuiJian',
    components: {
      MyMap: MyMap,
    },
    data() {
      return {
        shpJson: shpJsonPage13GuanHuiJian_1BaiJianTanGuanHuiJian,
        /*************************************
         * Step 1
         * 1）basicMapInfo，MyMap初始化后，获取基础数据，canvas 长，宽，字体
         * 2）mapInfo，地图信息（Model）
         *************************************/
        basicMapInfo: {},
        mapInfo: null,
        myMapShpJsonAdapter: new MyMapShpJsonAdapter()
      }
    },
    methods: {
      onClickNode(node) {
        let data = node.data
        let mxdID = this.myMapShpJsonAdapter.getMxdIDByNodeData(data)
        let dataID = this.myMapShpJsonAdapter.getDataIDFromNodeData(data)
        let pageName = this.myMapShpJsonAdapter.getPageNameByMxdID(mxdID, dataID)
        if (pageName) {
          stateManager.setMxdID(mxdID)
          this.$router.push(pageName)
        }
      },
      /*************************************
       * Step 2 获取绘制地图的基础信息
       *************************************/
      postInitMap(basicMapInfo) {
        this.basicMapInfo = basicMapInfo
      }
    },
    mounted() {
      let shpJson = null
      let mxdID = stateManager.getMxdID()
      if (mxdID === Const.mxdID_详情页_白碱滩管汇间) {
        console.log('进入[1白碱滩管汇间]');
        shpJson = shpJsonPage13GuanHuiJian_1BaiJianTanGuanHuiJian
      }else if (mxdID === Const.mxdID_阀门室1) {
        console.log('进入[2阀门室1]');
        shpJson = shpJsonPage13GuanHuiJian_2FaMenShi1
      }else {
        console.log('进入[3阀门室2]');
        shpJson = shpJsonPage13GuanHuiJian_3FaMenShi2
      }
      /*************************************
       * Step 3 转换地图数据
       *************************************/
      let mapInfo = new MyMapShpJsonAdapter().getMapInfo(this.basicMapInfo, shpJson)
      /*************************************
       * Step 4 更新地图数据
       *************************************/
      this.mapInfo = mapInfo
      let monitorInfo = this.myMapShpJsonAdapter.getMonitorInfoFromMapInfo(mapInfo);
      if (monitorInfo.dataIDList.length > 0) {
        setInterval(async () => {
          let infoList = this.myMapShpJsonAdapter.getInfoListByMonitorInfo(monitorInfo)
          let mapInfo = this.myMapShpJsonAdapter.getMapInfoByInfoList(this.mapInfo, monitorInfo, infoList)
          this.mapInfo = {
            ...mapInfo
          }
        }, 1000)
      }
    }
  }
</script>

<style scoped>
</style>
